<!--<template>
  <div class="main">
    <el-amap vid="amap" :center="center" :zoom="zoom" events="events" mapStyle="fresh"></el-amap>
    <button @click="add()">增加标记</button>
  </div>
</template>
<style lang="scss">
.main{
  width: 100%;
  height: 560px;
  text-align: center;
  button{
    width: 120px;
    height: 40px;
    margin-top: 10px;
    border: none;
    background: olivedrab;
    color: #fff;
    box-shadow: 2px 2px 6px #666;
    outline: none;
  }
}
</style>
<script>
  export default {
    name: 'Content',
    data() {
      return {
        zoom:13,//地图上显示的缩放级别的范围，在pc上，默认值[3,18];移动端显示的默认值是[3,19]
        center: [120.2, 30.3],
        events:{
            init(o){
              let marker=new AMap.Marker({
                position:[120.17,30.28]
              });
              marker.setMap(o);
            }
        }
      }
    },
    methods:{
      add(){
        let o = amapManager.getMap();
        let marker=new AMap.Marker({
          position:[120.2,30.3]
        })
        marker.setMap(o);
      }
    }
  }
</script>
&lt;!&ndash;<template>
  　　
  <div class="box">　　　　
    <ul>　　　　　　
      <li v-for="(item,$index) in items" @click="selectStyle (item, $index) "
          :class="{'active':item.active,'unactive':!item.active}">
        　　　　　<span>{{item.select}}</span>
      </li>　　　
    </ul>　　
  </div>
</template>

<script>

  import Vue from 'vue'

  export default {
    data() {
      return {
        active: false,
        items: [
          {select: '辣子鱼块'},
          {select: '红烧鱼'},
          {select: '麻辣鱼'},
          {select: '水煮鱼'},
          {select: '剁椒鱼头'},
          {select: '红烧排骨'},
          {select: '毛血旺'},
          {select: '水煮肉片'},
          {select: '辣椒炒肉'},
          {select: '炝炒时蔬'},
        ]
      }
    },


    methods: {
      selectStyle(item, index) {
        this.$nextTick(function () {
          this.items.forEach(function (item) {
            Vue.set(item, 'active', false);
          });
          Vue.set(item, 'active', true);
        });
      }
    }
  }
</script>

<style>
  .box ul {
    text-align: center;
  }

  .box ul li {
    width: 30%;
    float: left;
    padding: 15px;
    line-height: 30px;
    margin-left: 2.5%;
    margin-top: 10px;
    font-size: 15px;
  }

  .active {
    color: red;
    border: 1px solid #ff0000;
    border-radius: 5px;
  }

  .unactive {
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
  }




</style>-->

<template>
  <div>
    <button @click="OpenPay()">打开支付弹窗</button>
    <section class="pay-mask" v-show="showMask">
      <div class="container">
        <!--支付标题开始-->
        <div class="pay_title">请输入支付密码
        </div>
        <!--支付标题结束-->

        <!--支付密码框开始-->
        <div class="flex f-d-r pay_content">
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
          <div class="ipt_pay">
            <input type="password" maxlength="1" disabled>
          </div>
        </div>
        <!--支付密码框结束-->

      </div>
      <!--键盘输入部分开始-->
      <footer>
        <ul class="pay_btn">
          <li @click="btnpassword($event)">1</li>
          <li @click="btnpassword($event)">2</li>
          <li @click="btnpassword($event)">3</li>
          <li @click="btnpassword($event)">4</li>
          <li @click="btnpassword($event)">5</li>
          <li @click="btnpassword($event)">6</li>
          <li @click="btnpassword($event)">7</li>
          <li @click="btnpassword($event)">8</li>
          <li @click="btnpassword($event)">9</li>
          <li class="b9" @click="close_mask">确定</li>
          <li @click="btnpassword($event)">0</li>
          <li class="b9" @click="btndelete">删除</li>
        </ul>
      </footer>
      <!--键盘输入部分结束-->
    </section>
  </div>
</template>
<script>
  import $ from 'jquery'

  export default {
    name: 'Content',
    /* props: {
       payshow: {
         type: Boolean,
         default: true
       }
     },*/
    data() {
      return {
        index: -1,
        showMask: false
      }
    },
    created() {
    },
    mounted() {
      $(".ipt_pay input:first").focus();
    },
    methods: {
      btnpassword(e) {
        var obj = e.currentTarget;
        var payinput = $(".ipt_pay input");
        if (this.index < 5) {
          this.index++;
          $(payinput[this.index]).val($(obj).text());
        }
        if (this.index == 5) {
          var pay_pwd = '';
          var payinput = $(".ipt_pay input");
          for (var i = 0; i < payinput.length; i++) {
            pay_pwd += $(payinput[i]).val();
          }
          console.log(pay_pwd);
        }
      },
      btndelete() {
        var payinput = $(".ipt_pay input");
        if (this.index >= 0) {
          $(payinput[this.index]).val('');
          this.index--;
        }
      },
      close_mask() {
        this.showMask = false;
      },
      OpenPay() {
        this.showMask = true
      }
    }
  }
</script>
<style scoped>
  img {
    width: 100%;
    height: 100%;
  }

  section {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: rgba(0, 0, 0, .6)
  }

  .container {
    position: absolute;
    top: 4rem;
    margin-left: 15%;
    height: 150px;
    width: 70%;
    background: #fff;
    border-radius: 5px;
    /*margin: 0 .533333rem;*/
    padding-bottom: .266667rem;
  }

  .pay_title {
    position: relative;
    font-size: .48rem;
    text-align: center;
    color: #333;
    height: 3.333333rem;
    line-height: 3.333333rem;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
  }

  .close {
    position: absolute;
    right: .2rem;
    top: .2rem;
    width: .72rem;
    height: .72rem;
  }

  .pay_content {
    margin: 2.533333rem .533333rem .333333rem .533333rem;
  }

  .ipt_pay {
    width: 16.6%;
    height: 33px;
    border-left: 1px solid #ddd;
    float: left;
  }

  .ipt_pay input {
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    border-left: none;
    height: 96%;
    width: 99%;
    text-align: center;
    font-size: 25px;
    background: #fff;
  }

  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-weight: 600;
  }

  .pay_btn {
  }

  .pay_btn li {
    width: 33.3333%;
    float: left;
    height: 5.333333rem;
    line-height: 5.333333rem;
    text-align: center;
    background: #fff;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 25px;
  }

  .pay_btn li:active {
    background: #C2C2C2;
  }

  .b9:active {
    background: #fff !important;
  }

  .b9 {
    background: #C2C2C2 !important;
  }
</style>
